<template>
    <div class="home_header">
        <mt-header title="搜索">
            <mt-button icon="back" @click="$router.back()" slot="left"></mt-button>
        </mt-header>
        <div class="selects">
            <mt-field  placeholder="搜索医院、科室" v-model="select" @keyup.enter.native="sousuo"><img @click="sousuo" src="@/assets/images/home/search.png"/></mt-field>
            <span>热门搜索词</span>
            <ul>
                <li @click="bianhua(v)" v-for="(v,i) in lis" :key="i">{{v}}</li>
            </ul>
        </div>
        <div class="hosList">
            <span>热门医院</span>
        </div>
        <hos-card v-for="(v,i) in data" :key="i" :zhos='v' @click.native="$router.push(`/detail?${v.bid}`)"></hos-card>
        <div v-if="wulist" class="wulist">抱歉没有搜索的您查找的医院</div>
    </div>
</template>

<script>
import HosCard from '@/components/HosCard.vue'
    export default {
  components: { HosCard },
        data() {
            return {
                select: '',
                data:null,
                wulist:false,
                lis:['北京大学','三级甲','海淀','口腔','专科'],
            }
        },
        methods: {
            getData(url) {
                this.axios.get(url).then(res=>{
                    this.data = res.data.data
                    if(res.data.data){
                        this.wulist = false
                    }else{
                        this.wulist = true
                    }
                })
            },
            sousuo(){
                if(this.select.trim() == '')return
                this.getData(`/users/search/${this.select.trim()}`)
                this.select = ''
            },
            bianhua(value){
                this.getData(`/users/search/${value}`)
            }
        },
        mounted(){
            this.getData(`/users/search/北京`)
        }, 
    }
</script>

<style lang="scss" scoped>
.home_header{
    background-color:  #F3F4F6;
    width: 100%;
    .mint-header {
        color: #000;
        background-color: #ffffff;
        font-size: 1.5rem;
        font-weight: 700;
    }
}
.selects{
    background: #fff;
    width: 100%;
    height: 18vh;
    overflow: hidden;
    border-radius: 0 0 4vw 4vw;
    >span{
        display: block;
        padding: 2vh 5vw;
        letter-spacing: 0.5vw;
        font-size:1.2rem;
        color: #37BAA3;
        font-weight: 600;
        font-family: '楷体';
    }
    >ul{
        padding: 0vh 6vw;
        display: flex;
        flex-wrap: wrap;
        li{
            margin-right: 2vw;
            border-radius: 2vw;
            background: #E7EBEE;
            padding: 1vw 3vw;
            font-weight: 600;
            font-family: '楷体';
            font-size: 0.8rem;
        }
    }
}
.hosList{
    >span{
        display: block;
        padding: 2vh 5vw;
        letter-spacing: 0.5vw;
        font-size:1.2rem;
        color: #37BAA3;
        font-weight: 600;
        font-family: '楷体';
    }
}
::v-deep .mint-cell{
    border-radius: 8px;
    border: 1px solid #000;
    min-height:5vh;
    width: 92vw;
    margin: 0 auto;
    margin-top: 1vh;
}
.mint-field-other{
    img{
        width: 2rem;
    }
}
.wulist{
    width: 100vw;
    text-align: center;
    font-size: 1.2rem;
    color: #37BAA3;
    padding: 1vh 0;
}
</style>